<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>我的页面头部</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            font-size: 0.28rem;
            background-color: #ffffff;
        }

        .head-title {
            width: 100%;
            height: 0.88rem;
            color: #181818;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
            padding: 0 0.3rem;
            box-sizing: border-box;
            margin: auto;
        }

        .change-me {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
            font-size: 0.28rem;
            color: #181818;
        }

        #img-bg {
            height: 0.85rem;
            border-radius: 0.85rem;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
        }

        #user-img {
            width: 0.44rem;
            height: 0.44rem;
            border-radius: 100%;
        }

        .username {
            margin-left: 0.2rem;
        }

        .gradeIcon {
            height: 0.4rem;
            margin-left: 0.15rem;
            float: left;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body id="test">
    <div style="width: 100%;height:auto;background-color: #fff;">
        <div class="head-title">
            <span class="change-me" data-param=''>
                <span id="img-bg">
                    <img src="../../image/avatar.png" alt="" id="user-img">
                </span>
                <span class="username" style="white-space:nowrap;"></span>
                <img src="../../image/grade_one.png" alt="" class="grade1 gradeIcon hide">
                <img src="../../image/grade_two.png" alt="" class="grade2 gradeIcon hide">
                <img src="../../image/grade_three.png" alt="" class="grade3 gradeIcon hide">
                <img src="../../image/grade_four.png" alt="" class="grade4 gradeIcon hide">
                <img src="../../image/grade_five.png" alt="" class="grade5 gradeIcon hide">
                <img src="../../image/grade_six.png" alt="" class="grade6 gradeIcon hide">
            </span>
            <img src="../../image/iconmessagenox.png" id="changeImgMessage" style="width: 0.46rem;height: 0.36rem;">
        </div>
    </div>
</body>

<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        if (!account) return;
        app.handlePage();
        $(".username").text(account.user_name);
        $("#user-img").attr("src", account.avatar);
        function asyncData() {
            app.asynchronousAjax("send-msg/is-read", {
                token: account.token
            }, function (ret) {
                if (ret.code == 200) {
                    if (ret.data.is_not_read == false) {
                        $("#changeImgMessage").attr("src", "../../image/iconmessagenox.png");
                    } else {
                        $("#changeImgMessage").attr("src", "../../image/iconmessage.png");
                    }
                }
            })
        }
        asyncData();
        var event = ['user_edit_success', 'toPageMine', 'viewappear'];
        app.listen("user_edit_success", function (ret, err) {
            var account = app.getAccount();
            if (!account) return
            $("#user-img").attr("src", account.avatar);
            $(".username").text(account.user_name);
        });
        app.listen("quit_login", function () {
            app.closeF("mine_header");
        });

        function showGradeDialog() {
            $(".gradeIcon").click(function (e) {
                var param = {
                    dtype: "dialog72",
                    stopPropagation: true
                };
                app.dialog(param);
                e.stopPropagation();
            })
        }

        app.getProperties(account, function (ret) {
            var grade = ret.data.lists.user_level || 1;
            $(".gradeIcon").addClass('hide');
            $(".grade" + grade).removeClass('hide');
            showGradeDialog();
        }, false);
        $(".change-me").click(function () {
            // var params = {
            //     "page": "common/headerwin",
            //     "name": "center_headerwin",
            //     "param": {
            //         "subpage": "my/center",
            //         "name": "center",
            //         "title": "个人中心",
            //         "right": "保存",
            //         "rightColor": "orange",
            //         "rightType": "preservation"
            //     }
            // }
            var goPage = {
                name: "center",
                subpage: "my/center",
                title: "个人中心",
                rightTitle: "保存",
                param: {
                    pageName: "center",
                    rightColor: "orange",
                    rightType: "preservation"
                },
            };
            app.setNavBarAttr(goPage);
        });
        $("#changeImgMessage").click(function () {
            var goPageNum = {
                name: "pushMessage",
                subpage: "news/renren_news",
                title: "消息",
                param: {
                    pageName: "pushMessage"
                }
            };
            app.setNavBarAttr(goPageNum);
        })
        // app.listen('getGrade',function ( ret ) {
        //     var grade = ret.value;
        //     $(".gradeIcon").addClass('hide');
        //     $(".grade"+grade).removeClass('hide');
        //     showGradeDialog();
        // })
        app.listen("readSuccful", function () {
            asyncData();
        })
        app.listen("reloadHeader", function () {
            app.reload();
        })
    }
</script>

</html>